<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	
	
	<link rel='stylesheet' th:href="@{~/3thExt/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css}" href="../../static/3thExt/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
	<link rel='stylesheet' th:href="@{~/3thExt/bootstrap-table/1.12.1/bootstrap-table.min.css}" href="../../static/3thExt/bootstrap-table/1.12.1/bootstrap-table.min.css"/>
	<link rel='stylesheet' th:href="@{~/3thExt/select2/3.5.3/css/select2.css}" href="../../static/3thExt/select2/3.5.3/css/select2.css"/>
	<link rel='stylesheet' th:href="@{~/3thExt/bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css}" href="../../static/3thExt/bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css"/>
	<link rel='stylesheet' th:href="@{~/3thExt/bootstrap-fileinput/4.4.7/css/fileinput.min.css}" href="../../static/3thExt/bootstrap-fileinput/4.4.7/css/fileinput.min.css"/>
	<link rel='stylesheet' th:href="@{~/3thExt/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css}" href="../../static/3thExt/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"/>
	<link rel='stylesheet' th:href="@{~/css/icon-zc.css}" href="../../static/css/icon-zc.css"/>
	<link rel='stylesheet' th:href="@{~/css/style.css}" href="../../static/css/style.css"/>
	
	
</head>
<body>
<!--头部-->
<header th:replace="common/head" >
</header> 
<!-- 页面指向 -->
<div th:replace="common/title">
</div>
<!-- 菜单树 -->
<div th:replace="common/left" > 
</div>




<!--主体内容-->
<div class="page-container">

	<div class="container-fluid mb-20 clearfix">
		<div class="col-md-12">
			<h2 class="page-section-title">查询条件</h2>
		</div>
	</div>
	<div class="container-fluid query-frame-wrap mb-10 clearfix">
		<div class="col-lg-3">
			<div class="query-frame">
				<label>可视化类别</label>
				<select name="" class="form-control">
					<option value="">请选择</option>
					<option value="1">重要参数</option>
					<option value="2">普通参数</option>
				</select>
			</div>
		</div>
		<div class="col-lg-3">
			<div class="query-frame">
				<label>可视化类别</label>
				<select name="" class="form-control">
					<option value="">请选择</option>
					<option value="1">重要参数</option>
					<option value="2">普通参数</option>
				</select>
			</div>
		</div>
		<div class="col-lg-3">
			<div class="query-frame date-frame">
				<label>设备类型</label>
				<input autocomplete="new-password" type="text" class="form-control" />
			</div>
		</div>
		<div class="col-lg-3">
			<div class="query-frame query-button">
				<img src="../../static/image/search.png"/>
				<img src="../../static/image/rest.png"/>
			</div>
		</div>
	</div>

	<div class="container-fluid mb-20 clearfix">
		<div class="col-md-12 rlt">
			<h2 class="page-section-title">参数可视化列表</h2>
			<ul class="table-tool">
			    <li data-toggle="modal" data-target="#myModal">
			        <span class="icon-list_add" aria-hidden="true"></span>
			        <label>新增</label>
			    </li>
			    <li>
			        <span class="icon-list_xiugai" aria-hidden="true"></span>
			        <label>修改</label>
			    </li>
			    <li>
			        <span class="icon-list_shanchu" aria-hidden="true"></span>
			        <label>删除</label>
			    </li>
			    <li>
			        <span class="icon-list_shuaxin" aria-hidden="true"></span>
			        <label>刷新</label>
			    </li>
			</ul>
		</div>
	</div>

	<div class="chart-box">
	    <ul class="top clearfix">
	        <li class="active count">停机统计列表</li>
	        <li class="analysis">停机统计分析</li>
	    </ul>
	    <ul class="bottom">
	        <li class="" style="display:block">
	            <table id="dataTable" >
	            </table>
	        </li>
	        <li>
	            <div id="main" style="width: 1600px; height: 400px;"></div>
	        </li>
	    </ul>
	</div>
</div>


<script th:src="@{/3thExt/jquery/3.3.1/jquery-3.3.1.min.js}" src="../../static/3thExt/jquery/3.3.1/jquery-3.3.1.min.js"></script>
<script th:src="@{/3thExt/jquery-form/3.46/jquery.form.js}" src="../../static/3thExt/jquery-form/3.46/jquery.form.js"></script>
<script th:src="@{/3thExt/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js}" src="../../static/3thExt/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script th:src="@{/3thExt/bootstrap-table/1.12.1/bootstrap-table.min.js}" src="../../static/3thExt/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script th:src="@{/3thExt/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js}" src="../../static/3thExt/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
<script th:src="@{/3thExt/select2/4.0.6/js/select2.js}" src="../../static/3thExt/select2/3.5.3/js/select2.js"></script>
<script th:src="@{/3thExt/bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js}" src="../../static/3thExt/bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
<script th:src="@{/3thExt/bootstrap-fileinput/4.4.7/js/fileinput.min.js}" src="../../static/3thExt/bootstrap-fileinput/4.4.7/js/fileinput.min.js"></script>
<script th:src="@{/3thExt/bootstrap-fileinput/4.4.7/js/locales/zh.js}" src="../../static/3thExt/bootstrap-fileinput/4.4.7/js/locales/zh.js"></script>
<script th:src="@{/3thExt/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js}" src="../../static/3thExt/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script th:src="@{/3thExt/bootstrap-datetimepicker/js/bootstrap-datetimepicker.zh-CN.js}" src="../../static/3thExt/bootstrap-datetimepicker/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script th:src="@{/js/page-interaction.js}" src="../../static/js/page-interaction.js"></script>


<script type="text/javascript">

  $('ul.top li').each(function(i){
    $(this).click(function(){
      

      $('ul.top li').removeClass('active');
      $(this).addClass('active');
      $('ul.bottom>li').css('display','none');
      $('ul.bottom>li').eq(i).css('display','block');
      
//    if($(this).hasClass("count")){
//      $('#dataTable').bootstrapTable('refresh');
//    }else if($(this).hasClass("analysis")){
//      StopReport.analysis();
//    }

    })
  })

</script>
</body>
</html>